<template>
  <!-- 右侧公用按钮功能-导出-刷新 -->
  <div>
    <div style="font-size: 30px; display: inline-block; margin-right: 5px">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <i class="el-icon-upload" style="font-size:26px;color:black" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="currentexcel">{{ `${$t('button.exportExcel')}` }}</el-dropdown-item>
          <el-dropdown-item command="allexcel">{{ `${$t('button.exportAllExcel')}` }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div style="font-size:30px;display: inline-block;margin-right:5px">
      <a href="#">
        <el-tooltip class="item" effect="dark" :content="$t('button.refresh')" placement="top" style="cursor:pointer" @click.native="refreshClick">
          <i class="el-icon-refresh-right" style="font-size:24px;color:black" />
        </el-tooltip>
      </a>
    </div>
  </div>

</template>

<script>
import { Message } from 'element-ui'
export default {
  props: {
    // 刷新按钮
    refreshClick: {
      type: Function,
      required: true
    },
    headersArr: {
      type: Array,
      required: true
    },
    headersRelations: {
      type: Object,
      required: true
    },
    tableData: {
      type: Array,
      required: true
    },
    tableDataAll: {
      type: Array,
      required: true
    }
  },
  methods: {
    // 导出excel操作
    async handleCommand(command) {
      // 导出当前页excel
      if (command === 'currentexcel') {
        if (this.tableData.length < 1) return Message.warning('没有数据')
        const dataArr = this.formatJson(
          this.tableData,
          this.headersArr,
          this.headersRelations
        )
        import('@/vendor/Export2Excel').then((excel) => {
          excel.export_json_to_excel({
            header: this.headersArr, // 表格的头部
            // 二维数组 [ [], [], [] ]
            data: dataArr,
            filename: this.$route.meta.title + '表格', // 导出的excel文件名
            autoWidth: true, // 是否开启单元格宽度自适应
            bookType: 'xlsx' // 类型
          })
        })
      } else {
        // 导出全部excel
        this.$emit('exportAllfn')
        setTimeout(() => {
          console.log(this.tableDataAll)
          if (this.tableDataAll.length > 0) {
            const dataArr = this.formatJson(
              this.tableDataAll,
              this.headersArr,
              this.headersRelations
            )
            import('@/vendor/Export2Excel').then((excel) => {
              excel.export_json_to_excel({
                header: this.headersArr, // 表格的头部
                data: dataArr,
                filename: this.$route.meta.title + '总表', // 导出的excel文件名
                autoWidth: true, // 是否开启单元格宽度自适应
                bookType: 'xlsx' // 类型
              })
            })
          } else {
            Message.warning('数据暂未获取全到请重试')
          }
        }, 300)
      }
      // this.$message('click on item ' + command)
    },

    // 将表头数据和数据进行对应
    formatJson(rows, headersArr, headersRelations) {
      // [
      //   [ 值1, 值2, 值3, ... ]
      // ]
      const resultsArr = rows.map((item) => {
        const arr = []
        headersArr.forEach((key) => {
          const englishKey = headersRelations[key]
          arr.push(item[englishKey])
        })
        return arr
      })
      return resultsArr
    }
  }
}
</script>

<style>
</style>
